<template>

  <el-dialog :visible="showDialog" title="分配权限" @close="closeFn">
    <!--show-checkbox 是否显示复选框 -->
    <el-tree ref="tree" node-key="id" :data="permissionList" :props="{label:'title'}" show-checkbox check-strictly default-expand-all />
    <el-row type="flex" justify="center">
      <el-button size="small" type="primary" @click="confirmFn">确定</el-button>
      <!-- <el-button size="small" type="primary">确定</el-button> -->
      <el-button size="small" @click="closeFn">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { getPermissionList } from '@/api/permissions'
import { listToTree } from '@/utils/index'
import { getRolesId, editRoles } from '@/api/roles'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      permissionList: [], // 权限列表
      permissions: [], // 选中的权限列表
      roleId: ''
    }
  },
  async created() {
    // 获取权限列表
    const res = await getPermissionList()
    this.permissionList = listToTree(res.data, '0')
    console.log(this.permissionList, 11)
  },
  methods: {
    // 确定分配
    async confirmFn() {
      // 获取选中的权限集合
      this.permissions = this.$refs.tree.getCheckedKeys()
      // 调用接口 分配权限
      await editRoles({
        id: this.roleId,
        permissions: this.permissions
      })
      // 关闭弹窗
      this.closeFn()
    },
    closeFn() {
      this.$emit('update:showDialog', false)
    },
    async getRolePerm(id) {
      this.roleId = id
      console.log(id, 33)
      const res = await getRolesId(id)
      const data = res.data.permissions
      this.permissions = data.map(item => item.id)

      console.log(this.permissions, 66)
      // 保存默认权限列表数据
      //   this.permissionList = res.data
      // 回显
      this.$refs.tree.setCheckedKeys(this.permissions)
    }
  }
}
</script>

  <style>

  </style>

